<template>
  <formItem :item="item">
    <a-select
      v-if="item['@attributes'].type !== 'single'"
      style="width:100%;"
      allowClear
      v-model="item['value']"
      mode="multiple"
      :maxTagCount="getSelectAttr(item.rules)"
      :disabled="disabled"
    >
      <a-select-option
        :value="el['@attributes'].value"
        v-for="el of item.options.option"
        :key="el['@attributes'].value"
      >
        {{ el['@attributes'].displayName }}
      </a-select-option>
    </a-select>
    <a-select allowClear style="width:100%;" v-model="item['value']" :disabled="disabled" v-else>
      <a-select-option
        :value="el['@attributes'].value"
        v-for="el of item.options.option"
        :key="el['@attributes'].value"
      >
        {{ el['@attributes'].displayName }}
      </a-select-option>
    </a-select>
  </formItem>
</template>

<script>
export default {
  components: {
    formItem: () => import('./formItem.vue')
  },

  props: {
    disabled: {
      type: Boolean
    },

    item: {
      type: Object,
      default() {
        return null
      }
    }
  },

  computed: {
    getSelectAttr() {
      return rules => {
        let newArr = JSON.parse(JSON.stringify(rules.rule))
        if (!Array.isArray(newArr)) {
          newArr = [newArr]
        }

        let item = newArr.find(el => el['@attributes'].type === 'maxSize')

        return item ? parseInt(item['@attributes'].value) : ''
      }
    }
  }
}
</script>
